<template>
    <div>
        <div>login</div>
        <el-button @click="addRoute">AddRoute</el-button>
        <router-link to="/b">to B</router-link>
    </div>
</template>

<script>
    import B from './B'
    export default {
        name: "Login",
        beforeRouteEnter (to, from, next) {
            // 不能获取组件实例 `this`
            console.log('局部守卫beforeRouteEnter', to, from)
            next()
        },
        beforeRouteUpdate (to, from, next) {
            console.log('局部守卫beforeRouteUpdate', to, from)
            next()
        },
        beforeRouteLeave (to, from, next) {
            console.log('局部守卫beforeRouteLeave', to, from)
            next()
        },
        beforeCreate(){
            console.log('beforeCreate')
        },
        created(){
            console.log('created')
        },
        beforeMount(){
            console.log('beforeMount')
        },
        mounted(){
            console.log('mounted')
        },
        beforeDestroy(){
            console.log('beforeDestroy')
        },
        methods:{
            addRoute(){
                this.$router.addRoutes([
                    {path:'/b',component:B}
                ])
            }
        }
    }
</script>
